<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>瞬联商城-登录</title>
    <!-- 引入 LayUI 样式 -->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/mall/css/common.css}">
    <link rel="stylesheet" th:href="@{/mall/styles/login.css}">
</head>
<body>
<div class="main-container">
    <div class="form-box layui-anim layui-anim-scaleSpring">
        <h2>会员登录</h2>
        <form id="loginForm" class="layui-form">
            <div class="layui-form-item">
                <label for="phone" class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" id="phone" required lay-verify="required" placeholder="请输入手机号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="password" class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" id="password" required lay-verify="required" placeholder="请输入密码" class="layui-input">
                </div>
            </div>

            <!-- 新增验证码输入 -->
<!--            <div class="layui-form-item" style="display: flex; align-items: center;">-->
<!--                <input type="text" name="captcha" id="captcha" required lay-verify="required" placeholder="请输入验证码" class="layui-input" style="flex:1; margin-right:8px;">-->
<!--                <img id="captchaImg" th:src="@{/shopping/captcha.jpg}" alt="验证码" style="height: 40px; cursor: pointer; border: 1px solid #ddd;">-->
<!--            </div>-->

            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" id="login">立即登录</button>
            </div>
        </form>
        <div class="register-link">
            <a th:href="@{/shopping/member/register}">还不是会员？立即注册</a>
        </div>
    </div>
</div>

<!-- 引入 jQuery -->
<script th:src="@{/mall/jquery/jquery-3.7.1.min.js}"></script>
<!-- 引入 LayUI JS -->
<script th:src="@{/layui/layui.js}"></script>
<!-- 引入外部的 login.js -->
<script th:src="@{/mall/js/login.js}" type="text/javascript"></script>
<script th:inline="javascript">
    let ctx = /*[[@{/}]]*/"";
    if (ctx.endsWith("/")) {
        ctx = ctx.substring(0, ctx.length - 1);
    }
</script>
</body>
</html>